<!--
 * @Author: zegobuilder zegobuilder@zego.im
 * @Date: 2022-11-01 19:50:11
 * @LastEditors: zegobuilder zegobuilder@zego.im
 * @LastEditTime: 2022-11-01 20:00:19
 * @FilePath: /领格/performance.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Zego Express Video Call</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- <script src="./dist/ZegoExpressWebRTC.js"></script> -->
        <script src="./js/ZegoExpressWebRTC-2.17.0.js"></script>
        <link rel="stylesheet" href="./css/styles.css">
    </head>
    <body>
        <h1>Zego RTC Video Call</h1>
        <div class="video-wrapper">
            <button onclick="logoutRoom()">退出房间</button>
            <button onclick="login()">登录</button>
            <button onclick="addIntervalTimer()">添加循环<small>0</small></button>
            <br>
            <hr>
            <h4>Local video</h4>
            <h4>Remote video</h4>
            <video id="local-video" autoplay muted playsinline controls></video>
            <!-- <video id="remote-video" autoplay muted playsinline controls></video> -->
            <div id="rv"></div>
        </div>
        <div id="information"></div>
    </body>
    <script>
        //初始化信息
        let appID = 1739272706;
        let server = 'wss://webliveroom-test.zego.im/ws';

        let userID = 'alagong'; // userID 用户自己设置，必须保证全局唯一
        let userName = "阿拉贡";// userName 用户自己设置，没有唯一性要求
        let roomID = "room01"; // roomID 用户自己设置，必须保证全局唯一

        let localStream = null;
        let accessToken = '';
        
        let intervalCount = 0;
        let intervalPool = [];

        // 初始化实例
        const zg = new ZegoExpressEngine(appID, server);
        zg.setDebugVerbose(false);
        zg.on('roomStateUpdate', async (roomID, state, errorCode, extendedData) => {
            console.error('[roomStateUpdate]', roomID, state, errorCode, extendedData);
            if (state == 'CONNECTED') {
                localStream = await zg.createStream({camera: {video: true, audio: true, videoQuility:2}});
                const localVideo = document.getElementById('local-video');
                let streamID = new Date().getTime().toString();
                localVideo.srcObject = localStream;
                zg.startPublishingStream(streamID, localStream);
            }
        });

        // 加入房间
        fetch(`https://wsliveroom-alpha.zego.im:8282/token?app_id=${appID}&id_name=${userID}`)
            .then(rsp=> rsp.text())
            .then(token=> {
                accessToken = token;
            });

        function login() {
            zg.loginRoom(roomID, accessToken, { userID, userName }, { userUpdate: true })
                .then(rsp=> console.error('[xxx]', rsp)).catch(err=> console.error('[yyyy]', err))
        }

        function logoutRoom() {
            zg.logoutRoom(roomID);
        }
 function addIntervalTimer(){
   setInterval(()=>{
    addInterval()
   },0)
 }
        function addInterval() {
            intervalCount++;
            document.querySelector('small').innerHTML = intervalCount;
            let div = document.createElement("div");
            div.style.paddingLeft = "6px";
            div.style.paddingRight = "6px";
            div.style.display = "inline-block";
            div.id = "interval_" + intervalCount;
            document.querySelector("#information").appendChild(div);
            (function() {
                const iCount = intervalCount;
                const id = '#interval_' + iCount;
                let count = 0;
                let timer = setInterval(()=> {
                    count ++;
                    document.querySelector(id).innerHTML = count;
                }, 50);
                intervalPool.push(timer);
            })(intervalCount)
            
        }
    </script>
</html>